<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找回连接的奇幻之旅</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div class="page_error">
    <main>
      <img src="./images/error.png" alt="" width="72px" height="72px" style="margin-bottom: 20px;">
      <h2>未连接到互联网</h2>
      <p>
        <span>请试试以下方法：</span>
      <ul>
        <li>检查网线、调制解调器和路由器</li>
        <li>重新连接到 Wi-Fi 网络</li>
      </ul>
      </p>
      <p style="font-size: 12px;margin-top: 12px;">ERR_INTERNET_DISCONNECTED</p>

      <button id="reconnect">
        点击重新连接网络
      </button>

    </main>
    <div id="result"></div>
  </div>

  <div class="page">
    <div class="webz">
      <img src="./images/webz.png">
    </div>
    <button class="btn">马上报名</button>
    <button class="btn-bk">备考路径</button>
    <div class="content">
      <img src="./images/title.svg" class="block mt-40 mx-auto">
      <img src="./images/bg.svg" alt="">
    </div>
  </div>

  <script src="./js/index.js"></script>
  <script>
    const lintier = 2000; // 重连成功后页面的跳转时间
    const reconnect = document.getElementById('reconnect')
    const page = document.querySelector('.page')
    const page_error = document.querySelector('.page_error')
    var tryCount = 0
    let clickEvent = resetableOnce(() => {
      retry(handleLink, 5, 400).then(res => {
        result.innerHTML += `<p>${res}</p>`;
        let flag=false
        // 测试用例 1：resetableOnce（fn） fn 有参数的情况
        // 定义一个加法函数
        function addNumbers(a, b) {
          return a + b;
        }
        const test1 = resetableOnce(addNumbers);
        let one=test1.runOnce(2, 3)
        let two=test1.runOnce(4, 5)
        if(one===two){flag=true}else{flag=false}
        // 重置 once
        test1.reset();
        // 测试用例 2：resetableOnce（fn） fn 无参数的情况
        let a = 10;
        let fn = () => {
          return a = a + 1;
        };
        const test2 = resetableOnce(fn); // 传入了不同的函数，之前的 once 不针对此函数生效。
        let three=test2.runOnce()
        let four=test2.runOnce()
        if(three===four){flag=true}else{flag=false}
        test2.reset();
        let five=test2.runOnce()
        if(five!=four){flag=true}else{flag=false}
        if(flag){
            setTimeout(() => {
              page_error.style.display = 'none'
              page.style.display = 'flex'
            }, lintier)
        }
      }).catch(err => {
        reconnect.innerText = '点击重新连接网络'
        clickEvent.reset()
        result.innerHTML += `<p>${err}</p>`;
      })
    })
    reconnect.onclick = clickEvent.runOnce

    function handleLink() {
      reconnect.innerText = '已经在尝试连接网络...'
      tryCount++
      result.innerHTML += `<p>尝试重连${Date.now()}<p/>`;
      return new Promise((resolve, reject) => {
        let success = tryCount > 7; // 尝试7次以上将重连成功
        if (success) {
          resolve('网络连接成功');
        } else {
          reject('网络连接失败');
        }
      });
    }
    async function retry(operation, maxAttempts, delayBetweenRetries) {
      for (let attempt = 1; attempt <= maxAttempts; attempt++) {
        try {
          // 执行异步操作
          const result = await operation();
          return result; // 如果成功，返回结果
        } catch (error) {
          if (attempt < maxAttempts) {
            console.log(`第 ${attempt} 次尝试重连. 在 ${delayBetweenRetries}ms 后重试...`);
            await new Promise((resolve) => setTimeout(resolve, delayBetweenRetries));
          } else {
            throw error; // 如果达到最大尝试次数仍然失败，抛出错误
          }
        }
      }
    }
  </script>
</body>

</html>